﻿
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
    <title>手机上传图片</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css" />
    <link rel="stylesheet" href="/font-awesome/css/font-awesome.min.css" type="text/css" />
    <link href="~/Content/public.css" rel="stylesheet" />
    <link type="image/x-icon" rel="icon" href="/favic.ico" />
    <style>
        .upload-img {
            overflow: hidden;
            width: 48%;
            height: auto;
            display: inline-block;
            position: relative;
            float: left;
            margin: 5px 1%;
            max-height: 240px;
        }

            .upload-img:hover .ui-opts,
            .upload-img .ui-opts {
                display: none;
            }

        .title {
            width: 100%;
            height: 40px;
            line-height: 40px;
            background: #FFFFFF;
            text-align: center;
        }

            .title .img {
                padding-left: 10px;
                display: inline-block;
                float: left;
            }

            .title .name {
                font-size: 16px;
                color: #000;
                display: inline-block;
                position: absolute;
                left: 50%;
                margin-left: -42px;
            }

        #phoneImg {
            position: relative;
            margin: 5px 2%;
            width: 96%;
            float: left;
        }

            #phoneImg .default {
                width: auto;
                float: none;
            }

        .selectImages, .tips {
            margin: 0 2%;
            display: block;
            width: 96%;
            float: left;
        }

        .ui-image {
            width: 100%;
            height: auto;
            float: left;
        }

            .ui-image img {
                border-radius: 0px;
                -moz-border-radius: 0px;
                -webkit-border-radius: 0px;
                width: 100%;
                max-width: none;
                max-height: none;
            }

        .tips {
            line-height: 25px;
            color: #bbbbbb;
        }
    </style>
</head>
<body>
    <div class="title"><span class="img"><img src="../img/logo.png" height="30px"></span><span class="name">手机上传图片</span></div>
    <div class="upload-file" id="phoneImg">
        <div class="default">
            <span class="default-img"><i class="fa fa-picture-o fa-4x"></i><i class="fa fa-plus fa-2x plus"></i></span>
        </div>
    </div>
    <a class="btn btn-primary selectImages">选择图片</a>
    <p class="defaultColor f13 tips">本网页包含隐私信息，请勿将本网页分享给他人</p>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/layer.js"></script>
    <script src="~/Scripts/jquery.gridly.js"></script>
    <script src="~/Scripts/draggable.js"></script>
    <script src="~/Scripts/utils.js"></script>
    <script src="~/Scripts/require.js"></script>
    <script type="text/javascript">
        requirejs.config({
            baseUrl: '../../Scripts',
            urlArgs: "v209",
        });
        requirejs(['xml', 'upload'], function (xml, upload) {
            document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
                // 通过下面这个API隐藏右上角按钮
                WeixinJSBridge.call('hideOptionMenu');
            });
            $(document).on("click touchend", ".upload-file .upload-img", function (event) {
                event.preventDefault();
                event.stopPropagation();
                //window.open($(this).find('img').attr('src'));
            });
            $('#phoneImg').uploadImage({
                token: getUrlString('token'),
                projectId: getUrlString('projectId'),
                type:"Post",
                url:"/products/moblie",
                isOnly: false,
                isMobile: true,
                draggable: false,
                channel: true
            }, function (array) {
            });
        });
    </script>
</body>
</html>
